<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>订单处理</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div class="layui-container" style="padding-top: 30px;">

    <fieldset class="layui-elem-field layui-field-title">
        <legend>订单列表</legend>
    </fieldset>
    <table class="layui-hide" id="test" lay-filter="test"></table>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-normal layui-btn-radius layui-btn-xs" style="width: 50px" lay-event="send">派送</a>
    </script>

    <script src="layui/layui.js" charset="utf-8"></script>
    <script>
        layui.use(['table','jquery','form'], function () {
            var table = layui.table;
            var $ = layui.jquery;
            var form = layui.form;
            var tableIns = table.render({
                elem: '#test'
                , url: '/orderApi/untreatedOrderList'
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , title: '菜单列表'
                , cols: [
                    [
                        {field:'id', title: '编号', sort: true}
                        , {
                        field: 'name', title: '菜品', templet: function (data) {
                            return data.menu.name
                            }
                        }
                        , {
                        field: 'price', title: '单价', templet: function (data) {
                            return data.menu.price
                            }
                        }
                        ,{field:'flavor', title: '口味',templet:function(data){
                            return data.menu.flavor
                            }
                        }
                        ,{field:'nickname', title: '用户',templet:function(data){
                            return data.user.nickname
                            }
                        }
                        ,{field:'telephone', title: '联系电话',templet:function(data){
                            return data.user.telephone
                            }
                        }
                        ,{field:'address', title: '地址',templet:function(data){
                            return data.user.address
                            }
                        }
                        ,{field:'date', title: '下单时间'}
                        ,{fixed: 'right', title:'操作', toolbar: '#barDemo', align:'center'}
                    ]
                ]
                , page: true
            });


            //监听行工具事件
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                if (obj.event === 'send') {
                    layer.confirm('确认派送('+data.user.nickname+')订购的【'+data.menu.name+'】订单么', function(index){
                        $.ajax({
                            type: 'PUT',
                            url: '/orderApi/updateOrderState',
                            data: {'id':data.id},
                            success:function (res) {
                                layer.close();
                                layer.alert(res.data, {icon: 1});
                                tableIns.reload();
                            }
                        })
                    });
                }

            });

        });
    </script>

</div>
<script>
    //二级菜单联动
    layui.use('element', function () {
        var element = layui.element;

    });
</script>
</body>
</html>